<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="ratioMaleFemaleOutpatient1">
        2019
      </div>
      <div v-if="curId===1" class="chart-content" ref="ratioMaleFemaleOutpatient2">
        2020
      </div>
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis3-menzhengnannvbili',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    changeTab(id){
      this.curId=id
    },
    makeData(){
      var data10 = [
          {
              name: '正常占比',
              value: 12,
              percent: '58',
          },
          {
              name: '故障占比',
              value: 5,
              percent: '88',
          },
      ];

      var titleArr = [],
          seriesArr = [],
          colors = [
              'rgba(6, 254, 188, 1)',
              'rgba(255, 164, 3, 1)',
              'rgba(6, 254, 188, 0.1)',
              'rgba(255, 164, 3, 0.1)',
              'rgba(255, 255, 255, 0.38)',
              'rgba(255, 255, 255, 1)',
          ];
      data10.forEach(function (item, index) {
          let i = index;
          if (i % 2 === 1) {
              i = i + 1;
          }
          titleArr.push({
              text: '{b|正常个数}' + '   ' + '{a|' + item.value + '}' + '   ' + '{a|' + item.percent + '%}',
              left: (i + 1) * 25 + '%',
              top: '80%',
              textAlign: 'center',
              textStyle: {
                  fontWeight: 'normal',
                  fontSize: '16',
                  color: colors[4],
                  textAlign: 'center',
                  rich: {
                      a: {
                          color: colors[5],
                          fontSize: '14',
                          fontWeight: 'bold',
                      },
                      b: {
                          colors: colors[4],
                          fontSize: '14',
                          fontWeight: 'bold',
                      },
                  },
              },
          });
          seriesArr.push({
              name: item.name,
              type: 'pie',
              clockWise: false,
              radius: ['55%', '50%'],
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          { offset: 0, color: colors[index + 2] },
                          { offset: 1, color: colors[index] },
                      ]),
                      shadowColor: colors[index],
                      shadowBlur: 0,
                      label: {
                          show: false,
                      },
                      labelLine: {
                          show: false,
                      },
                  },
              },
              hoverAnimation: false,
              center: [(i + 1) * 25 + '%','35%'],
              data: [
                  {
                      value: item.percent,
                      label: {
                          normal: {
                              formatter: function (params) {
                                  return params.seriesName;
                              },
                              position: 'center',
                              show: true,
                              textStyle: {
                                  fontSize: '16',
                                  color: colors[4],
                              },
                          },
                      },
                  },
                  {
                      value: 100 - item.percent,
                      name: 'invisible',
                      itemStyle: {
                          normal: {
                              color: 'rgba(104, 104, 104, 0.3)',
                          },
                          emphasis: {
                              color: 'rgba(104, 104, 104, 0.3)',
                          },
                      },
                  },
              ],
          });
      });

      let option10= {
          backgroundColor: '',
          title: titleArr,
          series: seriesArr,
      };

      this.makeGraph(this.$refs.ratioMaleFemaleOutpatient1,option10)

      this.makeGraph(this.$refs.ratioMaleFemaleOutpatient2,option10)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }

  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    // height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    height:calc( (100vh - 1.23rem) / 3 - .3rem) ;
    .chart-content{
      width: 100%;
      // height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      height:calc( (100vh - 1.23rem) / 3 - .3rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>
